<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Bingo test page</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/bingo1.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); },
					function() { $(this).removeClass('ui-state-hover'); }
				);

			});
		</script>
		<style type="text/css">
			/*demo page css*/
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
			.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
		.btnplace #sernum {
		width:50px;
		height:50px;
	background-color: #CCCCCC;
	text-align: center;
	padding-top:25px;
	font-size:18px;
	color:#CC0000;
	display: block;
}
        </style>
	</head>
	<body>
	<?php
	$gameid=uniqid();
	$debug=false;
	?>
	<h1>Your bingo board</h1>
	<div class="btnplace">
	<table border="0">
	<tr>
	<td>&nbsp;</td>
	<td rowspan="6" width="200px" align="center">
	<span id="serplace"  style="display:none" >
	<span class="ui-state-hover">&nbsp;Player #2 </span> <div id="sernum" align="center">25 </div></span>&nbsp;</td>
	<td rowspan="6" width="200px" align="center">
	<span id="serdat" style="display:none">
	 			<table>
				<tr><td>&nbsp;</td></tr>
				<?php
    	$r=0;$c=1;
		for($i=1;$i<=25;$i++){
			if($i % 5 == 1){
	  		$r++; $c=1;
	  		echo '<tr><td>';
	  		echo "<ul id='icons' class='ui-widget ui-helper-clearfix'>\n";
	  		}
		?>
		    <li id="<?php echo 'sbtn' .$r.$c  ?>" onclick=sbtnclicked(<?php echo '\'sbtn\'' .','. $r.','.$c ?>)
			class="ui-state-default 		ui-corner-all" title="
			<?php echo $i?>" style="width:32px;height:32px; text-align: center; background-image:close.png">
			<span style="vertical-align:middle;"><?php echo ' ' ?></span></li>
		<?php
		    $c++;
			if($i % 5 == 0){
				echo '</ul>';
		  		echo '</td></tr>';
		  	}
		}
		?>
				</table></span> </td>
	</tr>
	<?php
    $r=0;$c=1;
	for($i=1;$i<=25;$i++){
	if($i % 5 == 1){
	  $r++; $c=1;
	  echo '<tr><td>';
	  echo "<ul id='icons' class='ui-widget ui-helper-clearfix'>\n";
	  }
	?>
	    <li id="<?php echo 'btn' .$r.$c  ?>" onclick=btnclicked(<?php echo '\'btn\'' .','. $r.','.$c ?>) class="ui-state-default ui-corner-all" title="<?php echo $i?>" style="width:32px;height:32px; text-align: center; background-image:close.png">
		<span style="vertical-align:middle;"><?php echo ' ' ?></span></li>
	<?php
	    $c++;
		if($i % 5 == 0){
		echo '</ul>';
	  echo '</td></tr>';
	  }

	}
	//
	//$( "input:submit, a, button", ".demo" ).button();
	// convert to button.
	?>
	</table>
	</div>
		<table  >
	<tr>
	<td width="10px" height="63">&nbsp;	</td>
	<td>
	<ul id="icons" class="ui-widget ui-helper-clearfix">

	<li onclick=btnsubmitclick() class="ui-state-default ui-corner-all" style="width:150px;text-align: center;">Submit</li>
	</ul>

	</td>
	</tr>
	</table>

		</div>
         <script language="javascript">

 $("#btn25").click(function () {
      var htmlStr = $(this).html();
     // $('#btn25 > span').text(htmlStr);
     // alert ($('#btn25 > span').text());

    });
</script>
<script>
	$(function() {
		 $( "li", ".btnplace" ).button();
		//$( "a", ".btnplace" ).click(function() { return false; });
	});


var lastval=0; // last clicked value
var submitdis=false; // submit button status
var token = false;// you dont have the token
var rows= Array(0,0,0,0,0);
var cols= Array(0,0,0,0,0);
var dia= Array(0,0);

//Initialize all here.
var gTimeStamp;
$(document).ready(function() {

  gTimeStamp= setInterval("checkServer()", 1000);
  <?php if($debug) echo 'generate();'; ?>

  $("#serplace").hide();
  clearInterval(gTimeStamp);

});


function btnclicked(eid,xrow,xcol)
{
 eid = eid +xrow+xcol;
 ele = $('#'+eid );
 val= $('#'+eid +' > span').text() ;
 //if (val==' ')
 if(val.charCodeAt(0)==10)
 { 	val=get_nextnum();
 	$('#'+ eid +' > span').text(val) ;
 	lastval=25;
 }
 else
 {

 	if(isEnabled(ele)) { //Button is enabled , do something.
  	if(token){
		rows[xrow-1]++;
		cols[xcol-1]++;
		if(xrow==xcol)
		{
		dia[0]++;
		}
		if(xrow == 6-xcol)
		{
		dia[1]++;
		}
		disableBtn(ele);
		token = false;
		if(checkwin())return;
		//give server a token with client data.
		$.ajax({
		url: 'engine.php',
		data:'gameid=<?php echo $gameid?>&CMD=token&cval='+val,
		success: function(data) {

			// alert(data);
			 dataarr = data.split(":");
			     if(dataarr.length > 1) {
			 	 if(dataarr[1] == 'token')
			 	 {
					 /*a small delay for response*/
					 //function()
					 var self=this;
					 fval = dataarr[2];
					 { setTimeout(function(){ pollbutton(fval);token=true;},500);};

			 	 }
			 	 }
			}
		});


		}
 	}

 }
}
function sbtnclicked(eid,xrow,xcol)
{
}
function pollserver(clientdat)
{
	$.ajax({
		url: 'engine.php',
		data:'gameid=<?php echo $gameid?>&'+clientdat,
		success: function(data) {
		//alert(data);
		    <?php
			//if($debug)
			//echo 'alert(data);';
			?>
			 dataarr = data.split(":");
			     if(dataarr.length > 1) {
			 	 if(dataarr[1] == 'info') {
				 			 $("#info").text(dataarr[2]);

			 	 }
				 if(dataarr[3]=='sdat'){
				 nums=dataarr[4];
				 createservermat(nums);
				 }
			 	 }
			}
		});
}
function  createservermat(nums)
{
numarr=nums.split(',');
ind=0;
 	for(i=1;i<=5;i++){
	for(j=1;j<=5;j++){
		 $('#sbtn'+i+''+j +' > span').text(numarr[ind++])  ;

	}}
	 $("#serdat").show(800);
//change color.
for(l=1;l<=5;l++)	{
		for(k=1;k<=5;k++)	{
		 sele=($('#sbtn'+l+''+k ));
//		alert( $('#sbtn'+i+''+j +' > span').text() )
		 var xcell= getelebynum($('#sbtn'+l+''+k +' > span').text()) ;
	//	 alert(l +" "+k);
			 ele =  $('#btn'+xcell.text() );
		if ( isEnabled( ele)==false)
		{
		sele.removeClass('ui-state-default').addClass('ui-state-disabled');
			 sele.css('border', '1px solid #CCCCCC');
		}
}
}

}
function pollbutton(btn)
{
 $("#sernum").text(btn);
			 //ele= getelebynum(btn);
			 var xcell= getelebynum(btn);
			 ele =  $('#btn'+xcell.text() );
				disableBtn(ele);
			 rows[xcell.row-1]++;
			 cols[xcell.col-1]++;
			 if(xcell.row==xcell.col)
			 dia[0]++;
			 if(xcell.row == 6-xcell.col)
			 		dia[1]++;

			 // if(xcell.row==xcell.col)
			// dia[1]++;

			checkwin();
}

function disableBtn(ele)
{
	if(isEnabled(ele))
	{
			 ele.removeClass('ui-state-default').addClass('ui-state-disabled');
			 ele.css('border', '1px solid #CCCCCC');
	}
}

function disableall()
{
	for(i=1;i<=5;i++)	{
		for(j=1;j<=5;j++)	{
		ele=($('#btn'+i+''+j ));
		if(isEnabled(ele))
		disableBtn(ele);
		}
	}

}

function passtoken(btn)
{

}

function getelebynum(num)
{
	f=0;
	for(i=1;i<=5;i++)
	{
	for(j=1;j<=5;j++)
	{
		if($('#btn'+i+''+j +' > span').text() == (''+num))
		{
		f=1;
		break;
		}
	}
	if(f==1)break;
	}
	return new xcell(i,j);// $('#btn'+i+''+j );
}

function xcell(xrow,xcol)
{
this.row=xrow;
this.col=xcol;
this.text=function(){return ''+this.row+''+this.col;}
this.toString=function(){ return this.text();}
}

function getnamebynum(num)
{
if(Math.floor(num/5) == num/5)
xrow = Math.floor(num/5) ;
else
xrow = Math.floor(num/5)+1;
xcol = num%5;
if(xcol==0)xcol=5;
//num = (row*10)+col;
return new xcell(xrow,xcol);//''+xrow+''+xcol;
}

function checkwin()
{
winr=0;winc=0;
tot=0;
if(dia[0]==5)
tot++;
if(dia[1]==5)
tot++;

for(i=0;i<5;i++)
if(cols[i]==5){ winr++; tot++;}

for(i=0;i<5;i++)
if(rows[i]==5){winc++;tot++;}

if(tot >= 5)
{
//alert('You win!');
//disableall();
pollserver('CMD=win');
return true;
}
return false;

}

function btnsubmitclick()
{

if(lastval<25) {
	alert('Please fill in all');
	return;
}
if(submitdis)
return ;
submitdis=true;
btnval = getvalues();
//alert(btnval); //submit to server
$.ajax({
url: 'engine.php',
data:"gameid=<?php echo $gameid?>&CMD='submit'&value="+btnval,
success: function(data) {
   dataarr = data.split(":");
    if(dataarr.length > 1)
     {
	 if(dataarr[1] == 'GAMESTART')
	 {
	 		 $("#serplace").show(800);
			 pollbutton(dataarr[2]);
			 $("#info").text('Your bingo was approved. player#2 started with no.'+dataarr[2]+ ', You may click another!');
			 token=true;
	 }
	 else
	 $("#info").text(dataarr[1]);
      }

}
});
}



function isEnabled(ele)
{
 if(ele.hasClass('ui-state-default'))
 return true;
 return false;

}

function getvalues()
{
sval='';
/*
for(i=1;i<=25;i++){
sval+=($('#btn'+ i +' > span').text()).trim() ;
sval+=",";
}*/
for (i=1;i<=5;i++)
 for(j=1;j<=5;j++)
 {
sval+=( $('#btn'+i+j +' > span').text()) ;
sval+=",";
 }

return (sval);
}

//Server auto ping back. This is not required for game invloving server and user.
function checkServer() {
	$.ajax({
url: 'engine.php',
data:'gameid=<?php echo $gameid?>&CMD=xx',
success: function(data) {
p=data;
//$('.result').html(data);
 //alert(data);
 //$.print('Load was performed.');
 dataarr = data.split(":");
 if(dataarr.length > 1)
 $("#info").text( p);
}
});
}

function generate()
{
/*
num=1;
for (i=1;i<=5;i++)
 for(j=1;j<=5;j++)
   {$('#btn'+i+j +' > span').text(num) ;
   num++;
   }
   */
   var Arrnum = new Array();
   for(i=1;i<=25 ; i++)
   {
		 f=0;
		 while(f==0)
		 {
		  num =   Math.floor(Math.random( ) * 25 - 1+ 1) + 1 ;

		  //search number in stack
		  for(j=0;j<Arrnum.length;j++)   {
		  		if(Arrnum[j]==num){
				break;
				}
		  }
		 	if(j==Arrnum.length)
			{  f=1;  Arrnum.push(num);}
			// if(Arrnum.length==25)break;
		 }

		$('#btn'+(getnamebynum(i)).text() +' > span').text(num) ;
		$('#btn'+(getnamebynum(i)).text() +'').attr({'title':num}) ;

   }
//alert(Arrnum.toString());
   lastval=25;

}
	</script>


		<!-- Highlight / Error -->
		<!--  <h2 class="demoHeaders">Highlight / Error</h2> -->
		<div class="ui-widget"  >
			<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
				<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
				<span id="info">Welcome!</span></p>
			</div>
		</div>
		<br/>
		<div class="ui-widget" style="display:none">
			<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
				<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
				<strong>Alert:</strong> Sample ui-state-error style.</p>
			</div>
		</div>

	</body>
</html>


